<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>测试结果</title>

		<style>
			/* content li*/
			.content ul{
				padding: 15px;
			}
			.content ul li{
				margin-bottom: 10px;
				border: 1px solid #e9e9e9;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				background-color: #fff;
			}
			/** li t **/
			.content ul li:nth-child(odd) .t{
				background-color: #59cec9;
			}
			.content ul li:nth-child(even) .t{
				background-color: #fab345;
			}
			.t{
				padding: 15px;
				background-color: #59cec9;
				color: #fff;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				-webkit-border-top-left-radius: 4px;
				-webkit-border-top-right-radius: 4px;
			} 
			.t-head{
				font-family: "Hiragino Sans GB W6";
				font-size: 16px;
				overflow: hidden;
			}
			.t-h-l{
				float: left;
				font-weight: 600;
			}
			.t-h-r{
				float: right;
				font-weight: 600;
			}
			.t-sub{
				margin-top: 15px;
				font-size: 13px;
				font-family: "Hiragino Sans GB W3";
				text-align: right;
			}
			/** li b **/
			.b{
				padding: 15px 15px 10px 15px;
				overflow: hidden;
			}
			.b-l{
				float: left;
			}
			.b-l-m{
				font-size: 0px;
			}
			.b-l-ml,
			.b-l-class{
				font-size: 13px;
				font-family: "Hiragino Sans GB W3";
				color: #000;
			}
			.b-l-s{
				margin-top: 5px;
				font-size: 13px;
				font-family: "Hiragino Sans GB W3";
				color: #aaa;
			}
			.b-r{
				float: right;
				display: inline-block;
				width: 11px;
				height: 16px;
				margin-top: 10px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			/* button */
			.test-again{
				position: fixed;
				bottom: 10px;
				left: 2.5%;
				right: 2.5%;
				display: block;
				width: 95%;
				height: 35px;
				margin: 0 auto;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				background-color: #59cec9;
				font-size: 18px;
				font-weight: 600;
				color: #fff;
				text-align: center;
				line-height: 35px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<ul>
				<li>
					<div class="t">
						<div class="t-head">
							<p class="t-h-l">您的BMI值为：</p>
							<p class="t-h-r">20.5</p>
						</div>
						<p class="t-sub">体型健康，继续习练保持好身材吧！</p>
					</div>
					<div class="b">
						<div class="b-l">
							<p class="b-l-m">
								<span class="b-l-ml">为您推荐：</span>
								<span class="b-l-class">塑性瑜伽</span>
							</p>
							<p class="b-l-s">查看相关课程</p>
						</div>
						<span class="b-r"></span>
					</div>
				</li>
				<li>
					<div class="t">
						<div class="t-head">
							<p class="t-h-l">您的脊柱柔韧度为：</p>
							<p class="t-h-r">35分</p>
						</div>
						<p class="t-sub">糟糕，不合格啦！脊柱僵硬，需要认真修复哦！</p>
					</div>
					<div class="b">
						<div class="b-l">
							<p class="b-l-m">
								<span class="b-l-ml">为您推荐：</span>
								<span class="b-l-class">塑性瑜伽</span>
							</p>
							<p class="b-l-s">查看相关课程</p>
						</div>
						<span class="b-r"></span>
					</div>
				</li>
			</ul>
			<button type="button" class="test-again">再测一次</button>
		</div>	
	</body>
</html>